﻿<!DOCTYPE html>
<html>
<head>
    <title>SignalR MoveShape Demo</title>
    <style>
        #shape {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
        }
    </style>
    <link href="Scripts/jquery-ui.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.4.1.min.js"></script>
    <script src="Scripts/jquery-ui.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="https://localhost:44364/signalr/hubs"></script>
</head>
<body>
   
    <script>
        $(function () {
            //
            //var conn = $.hubConnection("/test", { useDefaultPath: false });
            //
            //var fileHubProxy = conn.createHubProxy("testHub");
            //
            
            var conn = $.connection;
            conn.hub.url = "https://localhost:44364/signalr";
            var fileHub = conn.testHub;
            
            //var fileHub = $.connection.fileHub,
            //    $shape = $("#shape"),
            //    shapeModel = {
            //        left: 0,
            //        top: 0
            //    };
            //fileHubProxy.on("hello", function (str) {
            //    alert(str);
            //    //shapeModel = model;
            //    //$shape.css({ left: model.left, top: model.top });
            //})
            fileHub.client.hello = function (str) {
                
                alert(str);
            };
            //conn.start().done(function () {
            //    fileHubProxy.invoke("hello", "666");
            //    //$shape.draggable({
            //    //    drag: function () {
            //    //        shapeModel = $shape.offset();
            //    //        
            //    //        fileHubProxy.invoke("updateModel", shapeModel);
            //    //    }
            //    //});
            //}).fail(function () {
            //    console.log("fail")
            //});
            conn.hub.start().done(function () {
                fileHub.server.hello("123");
                //$shape.draggable({
                //    drag: function () {
                //        shapeModel = $shape.offset();
                //        fileHub.server.updateModel(shapeModel);
                //    }
                //});
            });
        });
    </script>

    <div id="shape" />
</body>
</html>